<template>
  <div class="mod-config">
    <basic-container>
      <navigationZDRW :sign="{ a: true, b: false, c: false }"></navigationZDRW>
      <div v-if="showZhong == 1" class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="发起名称">
                <el-input
                  v-model="dataForm.faqiName"
                  placeholder="发起名称"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人">
                <el-input
                  v-model="dataForm.ryName"
                  placeholder="考核人"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人岗位">
                <el-input
                  v-model="dataForm.userZw"
                  placeholder="被考核人岗位"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="任务状态">
                <el-select
                  style="width: 150px"
                  v-model="dataForm.state"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in optionsStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList()"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #b0bde2;
            padding-top: 10px;
          "
        >
          <div>
            <el-tooltip effect="dark" content="新增" placement="top-start">
              <el-button
                type="primary"
                icon="el-icon-plus"
                circle
                @click="addBtn"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top-start">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delBtn"
              ></el-button>
            </el-tooltip>
          </div>
          <div>
            <el-button
              type="primary"
              plain
              @click="endBtn"
              v-loading.fullscreen.lock="fullscreenLoadingend"
              >结束</el-button
            >
            <el-button type="primary" plain @click="temBtn">模板管理</el-button>
            <el-button
              type="primary"
              plain
              @click="submitBtn"
              v-loading.fullscreen.lock="fullscreenLoadingsmit"
              >提交</el-button
            >
          </div>
        </div>
        <el-table
          ref="table"
          style="width: 100%; margin-top: 20px"
          :data="dataList"
          border
          v-if="tableShow"
          v-loading="dataListLoading"
        >
          <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            width="80"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="faqiName"
            header-align="center"
            align="center"
            label="发起名称"
            min-width="200"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            header-align="center"
            align="center"
            min-width="120"
            label="被考核人编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="ryName"
            header-align="center"
            align="center"
            min-width="120"
            label="被考核人姓名"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span
                @click="checkDetails(scope.row)"
                style="color: #0e258c; cursor: pointer"
                >{{ scope.row.ryName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="userDeptName"
            header-align="center"
            align="center"
            min-width="120"
            label="被考核人单位"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="userZw"
            header-align="center"
            align="center"
            label="被考核人岗位"
            min-width="180"
            v-if="showType == 1"
            show-overflow-tooltip
          >
            <template slot="header">
              <el-tooltip placement="top" content="点击切换至被考核人职级">
                <span @click="switchBtn(2)">被考核人岗位</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="userZj"
            header-align="center"
            align="center"
            label="被考核人职级"
            v-if="showType == 2"
            min-width="180"
            show-overflow-tooltip
          >
            <template slot="header">
              <el-tooltip placement="top" content="点击切换至被考核人岗位">
                <span @click="switchBtn(1)">被考核人职级</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="rwCount"
            header-align="center"
            align="center"
            min-width="90"
            label="任务数量"
          >
          </el-table-column>
          <el-table-column
            prop="userLxDsc"
            header-align="center"
            align="center"
            min-width="120"
            label="发起类型"
          >
          </el-table-column>
          <el-table-column
            prop="stateExplain"
            label="任务状态"
            header-align="center"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              <div>
                <el-popover placement="top" width="660" trigger="hover">
                  <el-table :data="scope.row.gridData" max-height="400">
                    <el-table-column
                      width="260"
                      property="NAME_"
                      label="任务名称"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="ry_name"
                      label="处理人"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="START_TIME_"
                      label="开始时间"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="END_TIME_"
                      label="结束时间"
                      show-overflow-tooltip
                    ></el-table-column>
                  </el-table>
                  <span slot="reference">{{ scope.row.stateExplain }}</span>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="showMessage(scope.row.proceid)"
                    >流程跟踪</el-button
                  >
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog :visible.sync="showPicDialog" title="流程图" width="100%">
        <div>
          <el-row>
            <el-col :span="12">
              <el-image
                v-if="showPicDialog"
                :headers="headers"
                :src="actPicUrl"
                :preview-src-list="actPicUrlList"
                width="100%"
                class="bg"
              ></el-image>
            </el-col>
            <el-col :span="12"
              ><el-table :data="hisTableData" border style="width: 100%">
                <el-table-column prop="taskId" label="任务ID" width="100">
                </el-table-column>
                <el-table-column
                  prop="processInstanceId"
                  label="流程实例ID"
                  width="100"
                >
                </el-table-column>
                <el-table-column prop="taskName" label="任务名称">
                </el-table-column>
                <el-table-column prop="assignee" label="处理人">
                  <template slot-scope="scope">
                    <span>{{ scope.row.assignee }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="start" label="开始时间">
                </el-table-column>
                <el-table-column prop="end" label="结束时间">
                </el-table-column> </el-table
            ></el-col>
          </el-row>
        </div>
      </el-dialog>
      <temManagement
        :temanagementDialogData="temanagementDialogData"
        @temManagementChildren="temManagementChildren"
      ></temManagement>
      <addDialog
        :addDialogData="addDialogData"
        @addDialogDataChildren="addDialogDataChildren"
      ></addDialog>
      <editDialog
        :editDialogData="editDialogData"
        @editDialogDataChildren="editDialogDataChildren"
      ></editDialog>
    </basic-container>
    <UserCommonSelect ref="usercomment" @submitfy="submitfy"></UserCommonSelect>
    <el-dialog title="请选择：" :visible.sync="chooseVisible" width="30%">
      <div style="display: flex; justify-content: space-around">
        <el-button type="warning" @click="customBtn">自定义流程</el-button>
        <el-dropdown>
          <el-button type="primary" size="small" v-if="temList.length > 0">
            模板<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-button type="primary" size="small" v-else> 暂无模板 </el-button>
          <el-dropdown-menu v-if="temList.length > 0">
            <el-dropdown-item v-for="(item, index) in temList" :key="index"
              ><span
                @click="temsubmitBtn(item)"
                v-loading.fullscreen.lock="fullscreenLoadingmb"
                >{{ item.templateName }}</span
              ></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { radioTwoList } from "@/api/hetongrenwu/hetonghtxxdjb";
import UserCommonSelect from "@/views/hetongrenwu/components/usercomment-select";
import {
  getzdrwcjpage,
  submitStatusAll,
  deleteBatchcj,
  isExistRw,
  endTask,
} from "@/api/hetongrenwu/zhongdian/renwuchuangjian";
// import addDialog from "./addDialog";
import editDialog from "./editDialog";
import temManagement from "@/views/hetongrenwu/components/temManagement.vue";
import { showMessage } from "@/api/activiti/task";
import { getRenWuFaQi } from "@/api/hetongrenwu/zhongdianrenwu/zhongdianrwcj";
import { getListMb } from "@/api/hetongrenwu/hetongjgtb";
export default {
  components: {
    addDialog,
    temManagement,
    UserCommonSelect,
    editDialog,
  },
  data() {
    return {
      optionsStatus: [
        {
          value: 0,
          label: "创建中",
        },
        {
          value: 1,
          label: "填报中",
        },
        {
          value: 2,
          label: "审批完成",
        },
        {
          value: 3,
          label: "任务已下达",
        },
      ],
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      showZhong: 1,
      searchadvanced: true,
      searchheight: "0",
      radioTwo: "-1",
      hisTableData: [],
      actPicUrlList: [],
      actPicUrl: "",
      showPicDialog: false,
      radioTwoList: radioTwoList,
      addDialogData: {},
      editDialogData: {},
      temanagementDialogData: {},
      showType: 1,
      tableShow: true,
      fullscreenLoadingend: false,
      fullscreenLoadingsmit: false,
      jsonData: [],
      shouyuerendataList: [],
      chooseVisible: false,
      temList: [],
      fullscreenLoadingmb: false,
    };
  },
  created() {
    this.getDataList();
    this.fngetListMb();
  },
  watch: {},
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    //查看
    checkDetails(row) {
      this.editDialogData = {
        visible: true,
        rows: row,
      };
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      getzdrwcjpage(
        Object.assign({
          isbenbu: this.radioTwo,
          current: this.pageIndex,
          size: this.pageSize,
          ryName: this.dataForm.ryName,
          faqiName: this.dataForm.faqiName,
          userZw: this.dataForm.userZw,
          state: this.dataForm.state,
        })
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        this.dataListLoading = false;
      });
    },
    fngetListMb() {
      var params = {
        menuType: "创建任务",
        tagName: "重点任务",
      };
      getListMb(params).then((res) => {
        this.temList = res.data.data;
      });
    },
    // 新增
    addBtn() {
      getRenWuFaQi().then((res) => {
        this.addDataForm = res.data.data;
        if (this.addDataForm === null) {
          this.$message.error("当前没有启动中的任务！");
          return false;
        }
        this.addDialogData = {
          visible: true,
        };
      });
    },
    // 删除
    delBtn() {
      var data = this.$refs.table.selection;
      var ids = "";
      if (data.length == 0) {
        this.$message.warning("请勾选所要删除的数据");
      } else {
        data.forEach((ele) => {
          ids = ids + ele.id + ",";
        });
        this.$confirm("是否删除当前勾选的数据！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          deleteBatchcj({ ids: ids }).then((res) => {
            this.$message.success("删除成功");
            this.getDataList();
          });
        });
      }
    },
    // 结束
    endBtn() {
      var rowsarr = [];
      const rows = this.$refs.table.selection;
      if (rows.length == 0) {
        this.$message.closeAll();
        this.$message({
          type: "info",
          message: "请至少选择一条数据结束!",
        });
        return false;
      }
      rowsarr = this.$refs.table.selection;
      var params = {
        rows: rowsarr,
      };
      isExistRw(params).then((response) => {
        if (response.data.data) {
          this.$confirm("是否结束当前指标！", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.fullscreenLoadingend = true;
            endTask(params)
              .then((res) => {
                this.$message.closeAll();
                this.$message.success("结束成功");
                this.getDataList();
                this.fullscreenLoadingend = false;
              })
              .catch(() => {
                this.$message.closeAll();
                this.$message({
                  type: "error",
                  message: "提交失败!",
                });
                this.fullscreenLoadingend = false;
              });
          });
        } else {
          this.$message.closeAll();
          this.$message({
            type: "error",
            message: "已存在指标,不能结束！",
          });
        }
      });
    },
    // 模板管理
    temBtn() {
      this.temanagementDialogData = {
        dialogVisible: true,
        type: "创建任务",
      };
    },
    addDialogDataChildren(data) {
      this.getDataList();
    },
    editDialogDataChildren() {
      this.getDataList();
    },
    temManagementChildren(data) {
      this.getDataList();
    },
    switchBtn(e) {
      this.showType = e;
      this.tableShow = false;
      this.$nextTick((res) => {
        this.tableShow = true;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    submitBtn() {
      const rows = this.$refs.table.selection;
      if (rows.length > 0) {
        this.$confirm("是否要提交" + rows.length + "条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.chooseVisible = true;
          this.fngetListMb();
        });
      } else {
        this.$message({
          type: "info",
          message: "请选择数据提交!",
        });
      }
    },
    customBtn() {
      this.jsonData = JSON.stringify(this.shouyuerendataList);
      this.$nextTick(() => {
        this.$refs.usercomment.init("12", "allTree", this.jsonData, "htcj");
      });
    },
    temsubmitBtn(e) {
      var params = {
        rows: this.$refs.table.selection,
        type: 1,
        templateId: e.id,
      };
      this.fullscreenLoadingmb = true;
      submitStatusAll(params)
        .then((res) => {
          this.chooseVisible = false;
          this.getDataList();
          this.fullscreenLoadingmb = false;
          this.$message.success("提交成功");
        })
        .catch((res) => {
          this.chooseVisible = false;
          this.fullscreenLoadingmb = false;
          this.$message.warning("提交失败");
        });
    },
    submitfy(data) {
      console.log(data);
      if (data.tableDataUser.length == 0) {
        this.$message.warning("请选择审核人员");
      } else {
        var ids = "";
        data.tableDataUser.forEach((ele) => {
          ids = ids + ele.userId + ",";
        });
        this.fullscreenLoadingsmit = true;
        submitStatusAll({ rows: this.$refs.table.selection, ids: ids, type: 2 })
          .then((res) => {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: res.data.data + "条任务已提交",
            });
            this.fullscreenLoadingsmit = false;
            this.chooseVisible = false;
            this.getDataList();
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "提交失败!",
            });
            this.fullscreenLoadingsmit = false;
            this.chooseVisible = false;
          });
      }
    },
    showMessage(proId) {
      showMessage(proId).then((res) => {
        this.hisTableData = res.data.data;
        //console.log(res.data.data)
      });
      this.actPicUrl = `/act/sp/view/` + proId;
      this.actPicUrlList = [];
      this.actPicUrlList.push(`/act/sp/view/` + proId);
      this.showPicDialog = true;
    },
  },
};
</script>

<style>
</style>
